<!DOCTYPE html>
<html>
<head>
    <title>Cylindrical Capacitor</title>
</head>
<body>
<canvas id="capacitorCanvas" width="550" height="400" style="border: 1px solid rgb(211, 211, 211);"></canvas>
<script>
    const canvas = document.getElementById('capacitorCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for the drawing
    const cx = 150;
    const cy = 180;
    const l = 280;
    const ry1 = 35; // Inner conductor radius (vertical)
    const rx1 = 14; // Inner conductor radius (horizontal for perspective)
    const ry2 = 70; // Outer conductor inner radius (vertical)
    const rx2 = 28; // Outer conductor inner radius (horizontal for perspective)
    const shellThicknessV = 6;
    const shellThicknessH = 2.5;
    const ry2_outer = ry2 + shellThicknessV;
    const rx2_outer = rx2 + shellThicknessH;

    // Helper function to draw an arrow from a center point to an end point
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 8;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }
    
    // --- Start Drawing ---
    
    // 1. Draw the main cylinder body and cross-section (thick lines)
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    
    // Cylinder body
    ctx.beginPath();
    // Top line
    ctx.moveTo(cx, cy - ry2_outer);
    ctx.lineTo(cx + l, cy - ry2_outer);
    // Bottom line
    ctx.moveTo(cx, cy + ry2_outer);
    ctx.lineTo(cx + l, cy + ry2_outer);
    // Rounded end cap
    ctx.ellipse(cx + l, cy, rx2_outer, ry2_outer, 0, -Math.PI / 2, Math.PI / 2);
    ctx.stroke();

    // Cross-section on the left face
    ctx.beginPath();
    ctx.ellipse(cx, cy, rx2_outer, ry2_outer, 0, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.ellipse(cx, cy, rx2, ry2, 0, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.ellipse(cx, cy, rx1, ry1, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw annotations (thin lines)
    ctx.lineWidth = 1;

    // R2 annotation
    ctx.beginPath();
    // Arrow pointing to ~10 o'clock on the R2 ellipse
    const angleR2 = 2.1; // Radians for ~120 degrees
    const arrow_end_x_R2 = cx + rx2 * Math.cos(angleR2);
    const arrow_end_y_R2 = cy + ry2 * Math.sin(angleR2);
    drawArrow(ctx, cx, cy, arrow_end_x_R2, arrow_end_y_R2);
    ctx.stroke();
    // Arc for R2
    ctx.beginPath();
    ctx.arc(cx, cy, 58, Math.PI * 0.7, Math.PI * 1.2, false);
    ctx.stroke();
    // Label R2
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("R", cx - 55, cy - 25);
    ctx.font = "italic 15px 'Times New Roman'";
    ctx.fillText("2", cx - 44, cy - 21);
    
    // R1 annotation
    ctx.beginPath();
    // Arrow pointing to ~2 o'clock on the R1 ellipse
    const angleR1 = -0.6; // Radians for ~-34 degrees
    const arrow_end_x_R1 = cx + rx1 * Math.cos(angleR1);
    const arrow_end_y_R1 = cy + ry1 * Math.sin(angleR1);
    drawArrow(ctx, cx, cy, arrow_end_x_R1, arrow_end_y_R1);
    ctx.stroke();
    // Arc for R1
    ctx.beginPath();
    ctx.arc(cx, cy, 26, -Math.PI * 0.4, Math.PI * 0.4, false);
    ctx.stroke();
    // Label R1
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("R", cx + 25, cy + 28);
    ctx.font = "italic 15px 'Times New Roman'";
    ctx.fillText("1", cx + 36, cy + 32);

    // 'l' dimension line
    const l_y_pos = cy - ry2_outer - 25;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    // Horizontal line
    ctx.moveTo(cx, l_y_pos);
    ctx.lineTo(cx + l, l_y_pos);
    // Left tick
    ctx.moveTo(cx, l_y_pos - 6);
    ctx.lineTo(cx, l_y_pos + 6);
    // Right tick
    ctx.moveTo(cx + l, l_y_pos - 6);
    ctx.lineTo(cx + l, l_y_pos + 6);
    ctx.stroke();
    // Label for 'l'
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText("l", cx + l / 2 - 5, l_y_pos - 8);

    // 3. Draw the caption text
    ctx.font = "24px 'KaiTi', 'SimSun'";
    ctx.fillStyle = 'black';
    ctx.fillText("习题 7-64 图", 200, 360);

</script>
</body>
</html>